<template>
	<view class="detail">
		<text>{{message}}</text>
		<view class="container">
			<text>{{text}}</text>
		</view>
		<button type="primary" @click="add">add line</button>
		<button type="primary" plain=true @click="sub">subtract line</button>
		
		<view class="progress-box">
			<progress :percent="percent" show-info activeColor="#FF0000" duration=1000 stroke-width="5"></progress>
		</view>
		<image src="../../static/gir.jpeg" mode="aspectFit" @load="imageLoad" lazy-load=true></image>
	</view>
</template>

<script>
export default {
	name: 'detail',
	data() {
		return {
			message: 'this is zhaolang',
			lineText: "哈娟，憨憨，娟娟子",
			text: "",
			lineLimit: 10,
			texts: [],
			percent: 0,
		};
	},
	methods:{
		 add: function() {
			if(this.texts.length < this.lineLimit) {
				this.texts.push(this.lineText);
				this.text = this.texts.join("\n");
			}
		},
		sub: function() {
			if(this.texts.length > 0) {
				this.texts.pop();
				this.text = this.texts.join("\n");
			}
		},
		imageLoad: function() {
			console.log("图片加载完成");
		}
	},
	watch:{
		texts: function(newValue, oldvalue) {
			this.percent = newValue.length / this.lineLimit * 100;
		}
	}
};
</script>

<style scoped>
	.container {
		border: #000000 5px solid;
		border-radius: 20px;
		margin: 10px;
	}
	
	button {
		margin: 20px 10px;
	}
</style>
